<template>
    <div class="home-classic">
        <h1>经典歌单</h1>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item, index) in listData" :key="index">
                    <div class="cover">
                        <van-image :src="item.cover_url_medium" radius="10" />
                        <span>{{ item.access_num | numFilter(2) }}万</span>
                    </div>
                    <span>{{ item.title }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js";

export default {
    data() {
        return {
            listData: [],
            pageNo: 1,
        };
    },
    created() {
        this.getData(59, this.pageNo, 10);
    },
    methods: {
        getData(id, pageNo, pageSize) {
            this.$request("get", "/recommend/playlist", {
                id: id,
                pageNo: pageNo,
                pageSize: pageSize,
            }).then((res) => {
                console.log(res);
                if (res.result === 100) {
                    this.listData = res.data.list;
                    //函数调用
                    betterScrollHorizontal(
                        this,
                        this.$refs.wrapper,
                        this.$refs.content,
                        this.listData.length,
                        10
                    );
                }
            }).catch((error) => {
                console.error("请求失败:", error);
            });
        },
    }
    /*filters: {
        numFilter(value, num) {
            return parseFloat(value / 10000).toFixed(num);
        },
    },*/
};  
</script>

<style scoped>
.wrapper {
    width: 100%;
    overflow: hidden;
}

ul.content > li {
    width: 10rem;
    display: inline-block;
    vertical-align: top;
}

ul.content > li * {
    margin: 0 0.1rem;
}

ul.content > li >span {
    font-size: 0.8rem;
    color: #625858;
}

.cover {
    position: relative;
}

.cover>span {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    width: 5rem;
    border-radius: 1rem;
}
</style>